
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <link rel="stylesheet" href="./clock.css">
</head>
<body>
    <div class="container">
        <div class="drop">
          <div class="clock">
            <div class="hour">
              <div class="hr" id='h'></div>
            </div>
            <div class="min">
              <div class="mn" id='m'></div>
            </div>
            <div class="sec">
              <div class="sc" id='s'></div>
            </div>
          </div>
        </div>
      </div>
</body>
<script>
    const hr = document.getElementById('h');
const mn = document.getElementById('m');
const sc = document.getElementById('s');

function displayTime(){
	const date = new Date();

  const hh = date.getHours();
  const mm = date.getMinutes();
  const ss = date.getSeconds();

  const hrotation = 30*hh + mm/2;
  const mrotation = 6*mm;
  const srotation = 6*ss;

  h.style.transform = `rotate(${hrotation}deg)`;
  m.style.transform = `rotate(${mrotation}deg)`;
  s.style.transform = `rotate(${srotation}deg)`;
}

setInterval(displayTime, 1000) 
</script>
</html>